<template>
  <div>
    <el-input placeholder="请输入内容" v-model="search" class="input-with-select" :disabled="isDisabled">
      <el-select v-model="select" slot="prepend" placeholder="请选择" @change="changeSelect">
        <el-option label="全部商品" value="1"></el-option>
        <el-option label="商品名称" value="2"></el-option>
        <el-option label="店铺名称" value="3"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="searchGoods"></el-button>
    </el-input>
    <ProductList :select="select" :search="search"></ProductList>
  </div>
</template>

<script>
import ProductList from '@/components/commons/productList'
export default {
  name: "mainPage",
  components: {ProductList},
  data() {
    return {
      search: '',
      select: '1',
    }
  },
  computed: {
    isDisabled(){
      return this.select === "1";
    }
  },
  methods: {
    searchGoods(){
      console.log("click")
      if(this.select === "1"){
        this.$bus.$emit("getGoods")
      }else{
        if(this.search === ''){
          this.$message.warning("请先进行输入！")
        }else{
          this.$bus.$emit("getGoods")
        }
      }
    },
    changeSelect(){
      this.search = ''
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>